import React from 'react'
import { Switch, Route, Redirect } from "react-router-dom"
import PrivateRoute from "./utils/PrivateRoute"


//懒加载
const login = React.lazy(() => import("./pages/login/login.jsx"))
const register = React.lazy(() => import("./pages/register/register.jsx"))
const index = React.lazy(() => import("./pages/index/index.jsx"))
const detail = React.lazy(() => import("./pages/detail/detail.jsx"))
const list = React.lazy(() => import("./pages/list/list.jsx"))
const search = React.lazy(() => import("./pages/search/search.jsx"))
const discount = React.lazy(()=>import("./pages/discount/discount.jsx"))

//通过react.createContext创建一个上下文对象
export let MyContext = React.createContext();
let $pre = "http://localhost:1000"
if (process.env.NODE_ENV === "production") {
  $pre = ""
}

export default function App() {
  return (
    <div className='container'>
      <MyContext.Provider value={{ $pre }}>
        <React.Suspense fallback={<div>正在努力加载...</div>}>
          {/* 路由视图 Switch  路由规则：Route 重定向:Redireact */}
          <Switch>
            <Route path="/login" component={login}></Route>
            <Route path="/register" component={register}></Route>
            <PrivateRoute path="/index" component={index}></PrivateRoute>
            <PrivateRoute path="/list" component={list}></PrivateRoute>
            <PrivateRoute path="/detail/:id" component={detail}></PrivateRoute>
            <PrivateRoute path="/search" component={search}></PrivateRoute>
            <PrivateRoute path="/discount" component={discount}></PrivateRoute>
            <Redirect to="/login"></Redirect>
          </Switch>
        </React.Suspense>
      </MyContext.Provider>
    </div>
  )
}
